<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta charset="UTF-8">
    <title>结算账单</title>
    <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">
    <link rel="stylesheet" href="/static/css/financial/settlement/out_pay.css">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
</head>
<body>
    <div class="container">
        <div class="title">结 算 单</div>
        <div class="info">
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">结算时间</div>
                <div class="layui-col-xs9 r" th:text="${#dates.format(curr, 'yyyy-MM-dd')}"></div>
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">所属人</div>
                <div class="layui-col-xs9 r" th:text="${elderly.name}"></div>
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">所属机构</div>
                <div class="layui-col-xs9 r" th:text="${org.name}"></div>
            </div>
            <div class="layui-row row">
                <div class="layui-col-xs3 text-right">支付状态</div>
                <div class="layui-col-xs9 r" th:if="${wzf}">未支付</div>
                <div class="layui-col-xs9 r" th:if="${!wzf}">已支付</div>
            </div>

        </div>
        <div class="sub-title">
            待支付账单
        </div>
        <div class="receipt-box">
            <div class="receipt-item" th:each="r:${receipts}">
                <div class="layui-row row">
                    <div class="layui-col-xs3 text-right">账单名称</div>
                    <div class="layui-col-xs9 r" th:text="${r.name}"></div>
                </div>
                <div class="layui-row row">
                    <div class="layui-col-xs3 text-right">应收金额</div>
                    <div class="layui-col-xs9 r" th:text="'￥' + ${r.amount}"></div>
                </div>
                <div class="layui-row row">
                    <div class="layui-col-xs3 text-right">状态</div>
                    <div class="layui-col-xs9 r" th:if="${r.status == 1}">待支付</div>
                    <div class="layui-col-xs9 r" th:if="${r.status == 3}">已支付</div>
                    <div class="layui-col-xs9 r" th:if="${r.status == 4}">逾期</div>
                    <div class="layui-col-xs9 r" th:if="${r.status == 5}">作废</div>
                </div>
                <div class="layui-row row">
                    <div class="layui-col-xs3 text-right">创建时间</div>
                    <div class="layui-col-xs9 r" th:text="${#dates.format(r.createdTime, 'yyyy-MM-dd')}"></div>
                </div>
            </div>
        </div>
        <div class="monery">
            总计: <span style="color:red;font-size:22px;" th:text="'￥' + ${sum}"></span>
        </div>
        <input type="hidden" id="elderlyId" th:value="${elderly.id}">
        <input type="hidden" id="curr" th:value="${curr}">
        <input type="hidden" id="orgId" th:value="${org.id}">
        <input type="hidden" id="elderlyName" th:value="${elderly.name}">

        <button th:if="${wzf}" class="pay-btn wx" data-channel="1">微 信 支 付</button>
        <button th:if="${wzf}" class="pay-btn zfb" data-channel="2">支 付 宝</button>
        <button th:if="${wzf}" class="pay-btn yl" data-channel="3">银 联 支 付</button>
    </div>
    <script th:src="@{/static/plugins/jquery.js}"></script>
    <script th:src="@{/static/plugins/layui/layui.js}"></script>
    <script src="/static/js/financial/settlement/out_pay.js"></script>
</body>
</html>